<template>
  <view id="scanCode">
		<view class="nav-box">
			<view class="nav-box-text">
				<image src="@/static/img/home/person.png" class="person"></image>
				<view class="welcome">
					<view><text>姓名：{{ userInfo.nickName }}（取样人员）</text></view>
					<view><text>单位：{{ userInfo.dept.deptName }}</text></view>
				</view>
			</view>
		</view>
		<view class="project">
			<view class="project-text">
				<!-- <text>请扫描唯一标识</text> -->
				<!-- <view> -->
					<uni-easyinput class="uni-mt-5" :inputBorder="false" v-model="codeData" placeholder="请扫描或输入唯一标识" @blur="codeBlur(codeData)" @focus="codeFocus" @confirm="codeConfirm(codeData)" @iconClick="iconClick(codeData)"></uni-easyinput>
					<!-- <button v-show="codeFalg"  class="mini-btn" type="primary" size="mini" @click="codeConfirm(codeData)">确认</button> -->
					<view v-show="codeFalg" style="color: blue;width: 100rpx;text-align: center;" @click="codeConfirm(codeData)"> 确认 </view>
				<!-- </view> -->
			</view>
			<button :disabled="takeEwmFalg" type="primary" class="u-margin-top-20" @click="takeEwm">扫码</button>
		</view>
		<view class="tip">
			<text class="tip-title"><uni-icons type="info" color="#333" size="18" />提示</text>
			<view class="tip-text"><text>1、将二维码图片放入到手机矩形扫码区域内，距离摄像头10厘米左右最佳</text></view>
			<view class="tip-text"><text>2、输入的二维码必须符合规范(如:<text style="color: #ff0000;">AAA00001|1</text>)</text></view>
		</view>
		<!-- <uni-popup ref="tipPopup" background-color="#f7f4f9" :mask-click="false">
			<view class="popup-content">
				<view style="border-bottom: 1px #eee solid;text-align: center;font-weight: 500;padding: 8px 0;">提 示</view>
				<view style="text-align:center;padding: 8px 5px;">请确认GPS定位已打开，以完成见证取样位置定位</view>
				<view style="text-align: center;">
					<button type="primary" class="btn" @click="comfirm" style="margin: 8px;display: inline-block;">确 定</button>
				</view>
			</view>
		</uni-popup> -->
  </view>
</template>

<script>
import { checkCode } from '@/api/sample/index'
import {decrypt} from '@/common/jsencrpty.js'
	
export default {
  data() {
    return {
			projectId: '',
			userInfo: {},
			codeData:'',
			codeFalg:false,
			takeEwmFalg:false,
    }
  },
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo')
		this.userInfo.nickName = decrypt(this.userInfo.nickName)
		this.projectId = uni.getStorageSync('projectInfo').id
		
	},
	onReady() {
		
	},
	created(){
		// setTimeout(()=>{
		// 	this.$refs.tipPopup.open('center')
		// 	// uni.showToast({
		// 	// 	title:'请确认GPS定位已打开，以完成见证取样位置定位' ,
		// 	// 	icon: 'none'
		// 	// })
		// },500)
	},
  methods: {
		// 扫描二维码
		takeEwm() {
			uni.scanCode({
				onlyFromCamera: true,
				scanType: ['qrCode'],
				success: obj => {
					this.setCheckCode(obj.result)
					// checkCode(obj.result).then(res=>{
					// 	if (res.code == 200) {
					// 		// 保存二维码、项目id
					// 		let data = {
					// 			projectId: this.projectId,
					// 			qrCode: obj.result
					// 		}
					// 		uni.setStorageSync('sampleInfo', data)
					// 		uni.navigateTo({
					// 			url: '/pages/sample/position'
					// 		})
							
					// 	} else {
					// 		uni.showToast({
					// 			title: res.msg,
					// 			icon: 'none'
					// 		})
					// 	}
					// })
				},
				fail: err => {
					console.log('err: ', err);
				}
			});
		},
		comfirm(){
			this.$refs.tipPopup.close()
			// this.takeEwm()
		},
		// 二维码搜索
		iconClick(result){
			this.setCheckCode(result)
			this.codeData = ''
		},	
		codeConfirm(result){
			this.setCheckCode(result)
			this.codeData = ''
		},
		codeFocus(){
			this.codeFalg = true
			this.takeEwmFalg = true
		},
		codeBlur(result){
			this.codeFalg = false
			this.takeEwmFalg = false
		},
		// 二维码处理
		setCheckCode(result){
			this.takeEwmFalg = true
			uni.showLoading({
				title: '识别中'
			});
			checkCode(result).then(res=>{
				if (res.code == 200) {
					uni.hideLoading();
					// 保存二维码、项目id
					let data = {
						projectId: this.projectId,
						qrCode: result
					}
					uni.setStorageSync('sampleInfo', data)
					uni.navigateTo({
						url: '/pages/sample/position'
					})
					
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				this.takeEwmFalg = false
			})
		}
  }
}
</script>
<style lang="scss" scoped>
	#scanCode {
		overflow: hidden;
		background-color: #fafafa;
		height: calc(100vh - 44px);
		
		.nav-box {
			width: 100vw;
			height: 160px;
			margin-top: -44px;
			padding: 56px 20px 56px 20px;
			background-image: url(../../static/img/home/head-bg.png);
			
			.nav-box-text {
				height: 50px;
				display: flex;
				align-items: center;
				
				.person {
					width: 48px;
					height: 48px;
				}
				.welcome {
					color: #333;
					font-size: 32rpx;
					margin-left: 40rpx;
				}
			}
		}
		
		.project {
			padding: 10px;
			border-radius: 8px;
			background-color: #fff;
			margin: -32px 20px 0 20px;
			box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .1);
			
			.project-text {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #888;
				font-size: 14px;
				padding-bottom: 4px;
				border-bottom: 1rpx solid #eee;
			}
			.u-margin-top-20 {
				width: 160px;
				border-radius: 20px;
			}
		}
		
		.tip {
			padding: 20px;
			
			.tip-title {
				color: #333;
				font-size: 16px;
				font-weight: 700;
				
				.uni-icons {
					margin-right: 5px;
				}
			}
			.tip-text {
				color: #999;
				font-size: 12px;
				margin-top: 10px;
			}
		}
	}
	.popup-content {
		width: 70vw;
		
		/deep/ .uni-table {
			min-width: auto !important;
		}
		/deep/ .checkbox {
			padding: 0 !important;
		} 
		.btn{
			width: 45%;
		}
	}
</style>
